<template>
	<view class="listbox">
		<view class="name" @click="toDetails(item)">
			{{ type ? `编号：${item.orderNumber}` : `${item.petitionName}&nbsp;&nbsp;${item.companyName}` }}
			<span>{{ statusList[item.status || status] }}</span>
		</view>
		<view class="ctnbox" @click="toDetails(item)">
			<image :src="item.productList[0].productImg || item.productDTOS[0].productImg" mode=""></image>
			<view class="bactop">
				<view>品牌：{{ productNames[2] || item.productDTOS[0].brand }}</view>
				<view>类别：{{ productNames[3] || item.productDTOS[0].category }}</view>
				<view>名称：{{ productNames[0] || item.productDTOS[0].name }}</view>
				<view>SN：{{ productNames[1] || item.productDTOS[0].serial }}</view>
			</view>
		</view>
		<view class="btnbox" v-if="item.status == 2">
			<view class="l" @click.stop="setorder">拒绝</view>
			<view class="r" @click.stop="toitems">接单</view>
		</view>
		<view class="btnbox" v-if="item.status == 3">
			<view class="l" @click.stop="telephone">电话处理</view>
			<view class="r" @click.stop="punchTheClock">打卡</view>
		</view>
		<view class="btnbox" v-if="item.status == 4"><view class="r" @click.stop="chuli">处理</view></view>
		<view class="digbox" v-if="flag">
			<view class="digctn">
				<view class="title">拒绝理由</view>
				<input type="text" v-model="titles" placeholder="请输入拒绝理由" />
				<view class="dbtnbox">
					<view class="l" @click="flag = false">取消</view>
					<view @click="commit">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { workOrderreject } from '../api/order';
export default {
	props: ['item', 'status', 'type'],
	name: 'listItem',
	data() {
		return {
			productNames: [],
			flag: false,
			titles: '',
			statusList: {
				1: '待分配',
				2: '待接单',
				3: '待处理',
				4: '已解决',
				5: '未解决',
				6: '已拒绝'
			}
		};
	},
	created() {
		console.log('this.item', this.item.type);
		try {
			this.productNames = this.item.productNames.split(',');
		} catch (e) {
			console.log(e);
		}
	},
	methods: {
		chuli() {
			uni.navigateTo({
				url: `/pages/handle/handle?id=${this.item.id}&productid=${this.item.productList[0].id}&type=${this.item.type}`
			});
		},
		telephone() {
			uni.navigateTo({
				url: `/pages/telephone/telephone?id=${this.item.id}`
			});
		},
		punchTheClock() {
			uni.navigateTo({
				url: `/pages/punchTheClock/punchTheClock?id=${this.item.id}`
			});
		},
		toitems() {
			this.$emit('workOrderAccept', this.item.id);
		},
		commit() {
			workOrderreject({
				id: this.item.id,
				titles: this.titles
			}).then((data) => {
				this.$emit('workOrderAccept', false);
				this.flag = false;
			});
		},
		setorder() {
			this.titles = '';
			this.flag = true;
		},
		toDetails(val) {
			console.log(val);
			try {
				uni.navigateTo({
					url: `/pages/orderdetails/orderdetails?orderid=${val.id}&id=${val.productList[0].id}&url=${val.productList[0].productImg}&productNames=${val.productNames}`
				});
			} catch (e) {
				//TODO handle the exception
				uni.navigateTo({
					url: `/pages/orderdetails/orderdetails?result=${val.result}&orderid=${val.id}&id=${val.productDTOS[0].id}&url=${val.productDTOS[0].productImg}&productNames=${val.productNames}`
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.digbox {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	padding: 300upx 30upx 0 30upx;
	.digctn {
		width: 100%;
		background-color: #fff;
		border-radius: 10upx;
		.title {
			text-align: center;
			padding-top: 30upx;
		}
		input {
			padding: 30upx;
		}
		.dbtnbox {
			color: red;
			text-align: center;
			padding: 20upx;
			view {
				width: 50%;
				display: inline-block;
			}
			.l {
				border-right: 1px #ccc solid;
				box-sizing: border-box;
			}
		}
	}
}
.listbox {
	background-color: #fff;
	border-radius: 20upx;
	padding: 20upx;

	image {
		width: 200upx;
		height: 200upx;
	}

	.name {
		font-size: 26upx;
		border-bottom: 1px solid #999;
		padding-bottom: 10upx;

		span {
			float: right;
			color: red;
		}
	}

	.ctnbox {
		padding: 10px 0;
		display: flex;
		.bactop {
			padding-left: 20upx;
			font-size: 26upx;
			line-height: 1.8;
		}
	}

	.btnbox {
		text-align: right;
		padding-top: 20upx;
		border-top: 1px #999 solid;
		view {
			display: inline-block;
			font-size: 26upx;
			padding: 4upx 20upx;
			margin-left: 10upx;
			border-radius: 22upx;
		}
		.l {
			border: #ccc 1px solid;
			box-sizing: border-box;
		}
		.r {
			background-color: red;
			color: #fff;
		}
	}
}
</style>
